<template>
  <div class="home"> 
    <div class="box1">
      <div>
        <div class="message1">
          <span class="home_span1">处方时实监控：</span>
         <div><div>待审批:</div> <div class="red">{{toCheck_length}}</div></div>
         <div><div>配送中:</div> <div class="skyblue">{{delivery_length}}</div></div>
         <div><div>已审批:</div> <div class="green">{{check_length}}</div></div>
         <div><div>已完成:</div> <div class="blue">{{finish_length}}</div></div>
        </div>
        <div class="message2">
          <span class="home_span2">近七日的各药房处方数量占比：</span>
          <!-- //饼状图 -->
          <div class="circle" id="main2"></div>
        </div>
      </div>
      <div class="message3">
        <span class="home_span3">订单销量实时数据：</span>
        <div class="lineoptions" id="main"></div>
        
      </div>
    </div>
    <div class="box2">
      <span class="home_span4" >最近七天处方销量走势：</span>
      <div class="line" id="main1"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
import { color } from 'echarts/core';



export default {
   //注册echarts
   created(){
      if(this.$store.state.isAdmin == false){
     this.$router.push({
      path:'/empty?a=user'
     })
   }else{
     console.log('is 管理员');
      echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    PieChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,

  ]);
  
   }
   
  },
  mounted(){
   
     // ---------------------------折线图----------------------------
     var myChart = echarts.init(document.getElementById('main1'));
     let lineoption = {
        title: {
          text: '',
          legend: {
          data: ['销量']
        },
        },
         //图表位置
        grid: {
          left: "1%",
          right: "0%",
          bottom: "2%",
          top:"10%",
          containLabel: true,
        },
        tooltip: {},
        xAxis: {
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期天']
        },
        yAxis: {},
        series: [
          {
            name: '潍城中医院',
            type: 'line',
            data: [80, 60, 40, 80, 60, 100,120]
          },
          {
            name: '奎文中医院',
            type: 'line',
            data: [60, 80, 50, 40, 110, 90,90]
          },
            {
            name: '坊子中医院',
            type: 'line',
            data: [50, 70, 60, 65, 70, 90,60]
          },
            {
            name: '寒亭中医院',
            type: 'line',
            data: [40, 45, 80, 110, 60, 120,30]
          },
            {
            name: '青州中医院',
            type: 'line',
            data: [40, 45, 90, 50, 48, 60,80]
          },

        ]
    }//option
    myChart.setOption(lineoption);
    // console.log('看我',lineoption.series[0].data[0]=1000);
     // ---------------------------条形图----------------------------
  var linemyChart = echarts.init(document.getElementById('main'));
  
 var cate = [
        "潍城中药房",
        "奎文中药房",
        "坊子中药房",
        "青州中药房",
        "寒亭中药房",
      ];
      //数据值，顺序和Y轴的名字一一对应
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
         
        },
        //图表位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top:"%",
          containLabel: true,
        },
        //X轴
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //不显示X轴刻度线和数字
          splitLine: { show: false },
          axisLabel: { show: true },
        },
        yAxis: {
          type: "category",
          data: cate,
          //升序
          inverse: false,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: 300,
          animationDurationUpdate: 300,
          //key文字大小
          nameTextStyle: {
            fontSize: 5,
          },
        },
        series: [
          {
            //柱状图自动排序，排序自动让Y轴名字跟着数据动
            realtimeSort: true,
            name: "销售额",
            type: "bar",
            data: [1],
            barWidth: 14,
            barGap: 10,
            smooth: true,
            valueAnimation: true,
            //Y轴数字显示部分
            label: {
              normal: {
                show: true,
                position: "right",
                valueAnimation: true,
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#37BBF8" },
                  { offset: 1, color: "skyblue" },
                ]),
              },
            },
          },
        ],
        //动画部分
        animationDuration: 1000,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };
    //  linemyChart.setOption(option);
    // ---------------------------饼状图----------------------------
     var piemyChart = echarts.init(document.getElementById('main2'));
     let pieoption = {
       title: {
		// subtext: '共享中医药房',
		left: 'center',
	},
	tooltip: {
		trigger: 'item'
	},
	legend: {
		left: 'left'
	},
	series: [{
		name: '药房单量统计',
		type: 'pie',
		radius: '50%',
		data: this.pieData,
		radius: '90%',
		center: ['50%', '50%'], // 这个属性可以调整图像的位置，左面所示为中心
		label: {
		
		},
		emphasis: {
			itemStyle: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		}
	}]
  }//pieOption
    // piemyChart.setOption(pieoption);
    // ---------------------------------------------------
    this.$axios.get('/api/message_lists').then(res=>{
      for(let i = 0;i<res.data.params.data.length;i++){
        if(res.data.params.data[i].status == '配送中'){
          //配送
          this.delivery_length += 1 
        }
        if(res.data.params.data[i].status == '已完成'){
          this.finish_length += 1
        }
         // 判断处方归属及价格汇总
        if(res.data.params.data[i].shop_names == '潍城中药房'){
            this.barData[0] = Number(this.barData[0]) + Number( res.data.params.data[i].total_price)
              this.pieData[0].value = Number(this.pieData[0].value) + Number(1)
        } 
        if(res.data.params.data[i].shop_names == '奎文中药房'){
         this.barData[1] = Number(this.barData[1]) + Number( res.data.params.data[i].total_price)
          this.pieData[1].value = Number(this.pieData[1].value) + Number(1)
         console.log(this.pieData[1].value);
        } 
        if(res.data.params.data[i].shop_names == '坊子中药房'){
          this.barData[2] = Number(this.barData[2]) + Number( res.data.params.data[i].total_price)
           this.pieData[2].value = Number(this.pieData[2].value) + Number(1)
        } 
        if(res.data.params.data[i].shop_names == '青州中药房'){
         this.barData[3] = Number(this.barData[3]) + Number( res.data.params.data[i].total_price)
           this.pieData[3].value = Number(this.pieData[3].value) + Number(1)
        } 
        if(res.data.params.data[i].shop_names == '寒亭中药房'){
            this.barData[4] = Number(this.barData[4]) + Number( res.data.params.data[i].total_price)
              this.pieData[4].value = Number(this.pieData[4].value) + Number(1)
        } 
      }// 这里是结束循环

        //最后更新视图
        option.series[0].data = this.barData
         linemyChart.setOption(option)
         //饼图
         option.series[0].data = this.pieData
         console.log( option.series[0].data);
         piemyChart.setOption(pieoption);
    })
    // other
     this.$axios.get('/api/order_lists').then(res=>{
      for(let i = 0;i<res.data.params.data.length;i++){
        if(res.data.params.data[i].status == '审核中'){
          //审批中
          this.toCheck_length += 1 
        };
      }
       //已审批!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
          this.check_length = res.data.params.data.length
    
    })
     
    
  },//mounted
  data() {
    return {
      check_length:0,
      finish_length:0,
      delivery_length:0,
      toCheck_length:0,
      a:100,
      // gyjt:1,
      // fkyy:1,
      // trt:1,
      // xgyy:1,
      barData: [0,0,0,0,0],
      pieData: [{value: 0,name: '潍城中药房'},{value: 0,name: '奎文中药房'},{value: 0,name: '坊子中药房'},{value: 0,name: '青州中药房' },{value: 0,name:'寒亭中药房'},],
    }; //return
  },
    //监听器
   watch:{
      database:function(val,val1){
        console.log('更新前',val);
        console.log('更新后',val1);
         myChart.setOption(lineoption.series[0].data[0] = val1)
      },
      deep:true,
  },
   

 
};
</script>

<style scoped>
.home {
  position: absolute;
  top: 10%;
  left: 182px;
  width: 95%;
  height: 740px;
  display: flex;
  flex-wrap: wrap;
  /* border: 1px solid ; */
  overflow-y: hidden;
}
  ::-webkit-scrollbar { display: none !important }
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
     
.box1{
  width: 100%;
  height: 50%;
  /* border: 1px solid ; */
  display: flex;
   flex-wrap: wrap;
}
.box1>div{
  width: 49%;
  height: 100%;
}
/* 处方监控 */
.box1>div>div:nth-child(1){
  width: 100%;
  height: 50%;
  padding-left: 10px;
}

.box1>div>div:nth-child(1){
  display: flex;
  flex-wrap: wrap;
}
.home_span1{
  display: block;
  padding: 5px;
  width: 95%;
  height: auto;
  color: rgb(73, 71, 71);
  background-color: white;
  text-indent: 10px;
}

.box1>div>div>div{
  margin: 5px;
  width: 47%;
  height: 40%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  line-height: 45px;
  border-radius: 3px;
  box-shadow: 0px 0px 2px gray;
  /* background-color: rgb(244, 241, 241); */
}
.box1>div>div>div:nth-child(3){
  background-color: rgb(241, 251, 245);
}
.box1>div>div>div:nth-child(4){
  background-color: rgb(254, 249, 245);
}
.box1>div>div>div:nth-child(5){
  background-color: rgba(249, 247, 247, 0.489);
}
.box1>div>div>div>div{
  width: 80%;
  height: 45%;
  float: left;
  font-size: 18px;
  color: gray;
  margin-left: 25px;
}
.box1>div>div>div>.red{
  color: red;
}
.box1>div>div>div>.skyblue{
  color: skyblue;
}
.box1>div>div>div>.green{
  color: green;
}
.box1>div>div>div>.blue{
  color: blue;
}
/* //饼状图整体 */
.box1>div>div:nth-child(2){
  width: 97%;
  height: 50%;
  padding-left: 10px;
  /* border: 2px solid ; */
}

/* home_span2 */
.home_span2{
  margin-top: 5px;
  display: block;
  padding: 5px;
  width: 96%;
  height: auto;
  color: rgb(73, 71, 71);
  background-color: white;
  text-indent: 10px;
}
.box1>div>div:nth-child(2)>.circle{
  width: 98%;
  height: 85%;
}
.box1>.message3{
   width: 45%;
  height: 100%;
  background-color: white;
   /* border: 2px solid red; */
  /* border: 1px solid ; */
}
/* //条形图 */
.box1>.message3>.lineoptions{
  width: 100%;
  height: 95%;
  box-shadow: 0px 0px 2px #ccc;
}
.home_span3{
  display: block;
  margin-bottom: 3px;
  padding: 5px;
  width: 100%;
  height: auto;
  color: rgb(73, 71, 71);
  background-color: white;
  text-indent: 10px;
  box-shadow: 0px 0px 1px gray;
  /* border: 2px solid ; */
}
.box2{
  padding: 20px;
  width: 100%;
  height: 50%;
/*   
  border: 1px solid ; */
  
}
.home_span4{
  display: block;
  padding: 0px;
  width: 99%;
  height: auto;
  color: rgb(73, 71, 71);
  background-color: white;
  text-indent: 10px;
  /* border: 2px solid ; */
  
}
/* //折线图 */
.line{
  width: 100%;
  height: 90%;
  background-color: white;
  /* border: 2px solid ; */
}

</style>